<template>
    <div>
        <div class="sidebar-top">
            <!-- 顶部 -->
            <div>星巴克后台管理</div>
            <div>退出</div>
        </div>
        <div class="sidebar-cont">
            <!-- default-active 选中第2个 :default-active 动态-->
            <el-menu :default-active="ac_index" @select="Select">
                <div v-for="(item, index) in menu" :key="index">
                    <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
                        <!-- <template #title>
                        <el-icon><Histogram /></el-icon>
                        <span>{{ item.title }}</span>
                  </template> -->
                        <el-icon>
                            <!-- <Histogram /> -->
                            <!-- vue2 的写法 -->
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="2">菜单二</el-menu-item>
                <el-menu-item index="3">菜单三</el-menu-item> -->
                    <!-- 二级、三级菜单 -->
                    <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
                        <!-- 二级要包到template里，要不报错，一级可以不用包 -->
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>

                        <!-- <span>{{ item.title }}</span> -->
                        <div v-for="(two, index_two) in item.Subclass" :key="index_two">
                            <!-- <template #title>菜单四</template> -->
                            <el-menu-item :index="two.id">{{ two.title }}</el-menu-item>
                            <!-- <el-menu-item index="4-2">菜单四-2</el-menu-item>
                        <el-menu-item index="4-3">菜单四-3</el-menu-item> -->
                        </div>
                    </el-sub-menu>
                </div>

            </el-menu>
            <!-- <router-view></router-view> -->
        </div>
        <!-- 二级三级路由识别，必须添加 -->
        <router-view></router-view>
    </div>
</template>
<!--  <script lang="ts" setup>  -->
<script lang="ts" setup>
import { Histogram, UserFilled, CreditCard, Bowl, Avatar } from '@element-plus/icons-vue'
import { reactive, shallowRef, ref, onMounted } from 'vue'

const Array = [
    {
        id: '1',
        icon: Histogram,
        title: '数据分析',
        router: '',
        Subclass: [] // 是否有二级、三级菜单
    },
    {
        id: '2',
        icon: UserFilled,
        title: '用户列表',
        router: '',
        Subclass: [] // 是否有二级、三级菜单
    },
    {
        id: '3',
        icon: CreditCard,
        title: '订单管理',
        router: '',
        Subclass: [] // 是否有二级、三级菜单
    },
    {
        id: '4',
        icon: Bowl,
        title: '菜品管理',
        router: '',
        Subclass: []
    },
    {
        id: '5',
        icon: Avatar,
        title: '员工管理',
        router: '',
        Subclass: [
            {
                id: '5-1',
                title: '员工详情',
                router: ''
            },
            {
                id: '5-2',
                title: '其他页面',
                router: ''
            }
        ]
    }
]

// shallowRef 基础类型数据
// const menu = reactive(Array) // reactive 响应式
const menu = shallowRef(Array) // 不是响应式

const ac_index = ref('1') // 默认选中第一个
// 菜单激活回调
function Select(index: string, path: string) {
    console.log("index: ", index)
    console.log("path: ", path)
    // 本地缓存，JSON.stringify 变成数字类型
    localStorage.setItem('menuid', JSON.stringify(index))
}
// 生命周期函数
onMounted(() => {
    ac_index.value = JSON.parse(localStorage.getItem('menuid'))
})

</script>

<style scoped></style>